@import "./common.scss";

.wrap {
    header {
        nav {
            .title {
                a:nth-child(4) {
                    color: #cf0d0d;
                    border-bottom: 3px solid #cf0d0d;
                    font-weight: bold;
                }
            }
        }

        .photo {
            img {
                width: 100%;
                display: block;
            }
        }
    }

    main {
        width: 1300px;
        margin: -130px auto 210px;
        background-color: #f3f3f3;
        display: flex;
        flex-direction: column;
        align-items: center;

        >div {
            width: 1200px;
        }

        .content_top {
            height: 318px;
            margin-top: 230px;

            .imgBox {
                float: left;

                img {
                    display: block;
                }
            }

            .textBox {
                float: right;
                font-size: 22px;
                color: #999898;

                p {
                    line-height: 35px;

                    &:first-child {
                        margin: 65px 0 23px;
                    }

                    &:nth-child(3) {
                        margin: 45px 0;
                    }

                    span {
                        display: inline-block;
                        width: 100px;
                        color: #fff;
                        background-color: #cf0d0d;
                        text-align: center;
                        margin-right: 25px;
                    }
                }
            }

        }

        .content_middle {
            height: 95px;
            margin-top: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 3px solid;
            border-color: #d6d6d6 transparent #d6d6d6 transparent;

            a {
                display: inline-block;
                font-size: 22px;
                padding: 0 10px;
                color: #979797;

                &:first-child {
                    color: #cf0d0d;
                }

                &:hover {
                    color: #cf0d0d;
                }
            }
        }

        .content_bottom {
            height: 1630px;
            margin-top: 100px;
            display: flex;
            flex-flow: wrap;
            justify-content: space-between;
            align-content: space-between;

            .circle {
                &:hover {
                    @extend %hover;
                }

                .imgBox {
                    img {
                        width: 100%;
                        display: block;
                    }
                }

                .infoBox {
                    height: 265px;
                    border: solid 1px #a0a0a0;
                    border-top-color: transparent;
                    padding: 0 10px 0 15px;

                    p {
                        font-size: 22px;
                        line-height: 35px;

                        &:first-child {
                            font-size: 24px;
                            margin: 30px 0 35px;
                            position: relative;

                            span {
                                float: right;
                                font-size: 22px;
                            }

                            .icon-shixin {
                                font-size: 35px;
                                color: #cf0d0d;
                                position: absolute;
                                top: 0;
                                right: 60px;
                            }
                        }

                        &:nth-child(n+2) {
                            color: #979797;
                            margin-bottom: 15px;

                            span {
                                display: inline-block;
                                width: 100px;
                                color: #fff;
                                background-color: #cf0d0d;
                                text-align: center;
                                margin-right: 25px;
                            }
                        }
                    }
                }
            }
        }

        .loading {
            margin-top: 150px;
            @extend %loading;
        }

        .backBox {
            @extend %back;
            margin-top: 40px;
        }

    }
}